<template>
    <div class="ServiceAudit">
        <div class="title">服务管理-企业发布职位</div>
        <div class="auditTop">
            <div class="top">
                <div class="firstDiv">
                    <span>{{jobInfo.companyName}}</span>
                    <span class="Ltrial">{{jobInfo.checkState==1?'(试用)':''}}</span>
                </div>
                <div class="secDiv">
                    <div>{{jobInfo.contactName}}</div>
                    <div>{{jobInfo.phone}}</div>
                    <!-- <button class="lgoutong">沟通</button> -->
                    <img @click="toCommunication" src="../../assets/imgs/duih.png"
                         style="width:30px;height: 30px;margin:0 20px 0 20px;cursor:pointer;"/>
                </div>
            </div>
            <div class="bottom">
                <el-select v-model="value" value-key="id" placeholder="职位名称" @change="jobChange">
                    <el-option
                            v-for="item in companyInfo.jobList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <div class="right">
                    <el-button class="second-button" @click="Popup(2)" v-if="b1">不通过</el-button>
                    <el-button class="second-button" @click="Popup(1)" v-if="b2">通过</el-button>
                </div>
            </div>
            <div class="bottom-time" v-if="tryShow">
                <span style="margin: 0 10px 0 0;">试用期：{{jobInfo.tryCooperNum ? jobInfo.tryCooperNum + '天': '---'}}</span>
                <span>试用期剩余时间：<span style="color:#ff3399;">{{jobInfo.tryCooperTimeDays != 0 ? jobInfo.tryCooperTimeDays  : '1'}}</span>(天)</span>
            </div>
            <div class="auditMid"><el-button @click="dialogTable()">查询职位修改记录</el-button></div>
        </div>



        <div class="service-list">
            <el-tabs
                    v-model="activeName"
                    type="card"
                    class="detail_tab service-tab"
            >
           


                <el-tab-pane label="职位JD" name="first">
                    <div class="box m_t_10">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>职位基本信息</span>
                        </div>
                        <ul class="body">
                            <li>
                                <span class="title">职位名称：</span>
                                <span>{{jobInfo.jobList[0].name}}</span>
                            </li>
                            <li>
                                <span class="title">招聘人数：</span>
                                <span>{{jobInfo.jobList[0].recruitingNumbers}}人</span>
                            </li>
                            <li>
                                <span class="title">职位年薪：</span>
                                <span v-if="jobInfo.jobList[0].tax == 0">税前</span>
                                <span v-if="jobInfo.jobList[0].tax == 1">税后</span>
                                <span>  {{jobInfo.jobList[0].salaryPerMonthLow}}-{{jobInfo.jobList[0].salaryPerMonthHigh}}W/
                        {{jobInfo.jobList[0].salaryCount}}年</span>
                            </li>
                            <li>
                                <span class="title">工作地点：</span>
                                <span>{{jobInfo.jobList[0].province}}-{{jobInfo.jobList[0].city}}{{jobInfo.jobList[0].address ? '-'+jobInfo.jobList[0].address : ''}}</span>
                            </li>
                            <li>
                                <span class="title">面试反馈时间：</span>
                                <span>{{jobInfo.jobList[0].interFeedbackTimeIdStr}}</span>
                            </li>
                            <li>
                                <span class="title">保证期：</span>
                                <span>{{jobInfo.jobList[0].guaranteedPeriodIdStr}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>职位要求</span>
                        </div>
                        <ul class="body">
                            <li style="">
                                <span class="title">职位描述：</span>
                                <span class="" style="margin-left:70px;display:block;" v-html="jobDesc"></span>
                            </li>
                            <li>
                                <span class="title" style="">任职要求：</span>
                                <span class="" style="margin-left:70px;display:block;" v-html="jobReq"></span>
                            </li>
                            <li>
                                <span class="title">执业类型：</span>
                                <span>{{jobInfo.jobList[0].licenseTypeIdStr}}</span>
                            </li>
                            <li>
                                <span class="title">职位亮点：</span>
                                <span class="label"
                                      v-for="(item,index) in jobInfo.jobList[0].jobSpot.split(',')"
                                      :key="index">{{item}}
									</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>人员描述</span>
                        </div>
                        <ul class="body">
                            <li>
                                <span class="title">工作年限：</span>
                                <span>{{jobInfo.jobList[0].workTimeStr}}</span>
                            </li>
                            <li>
                                <span class="title">学历要求：</span>
                                <span>{{jobInfo.jobList[0].eduReqStr}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>有效期</span>
                        </div>
                        <ul class="body">
                            <li>
                                <span class="title">职位有效期：</span>
                                <span>{{jobInfo.jobList[0].validity}}天</span>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="职位PA" name="second">
                    <div class="box m_t_10">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>必须</span>
                        </div>
                        <ul class="body" v-for="(item,key) in talentNecessaryReqKey">
                            <li>
                                <span class="title">{{item}}：</span>
                                <span>{{talentNecessaryReq[item]}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>优先</span>
                        </div>
                        <ul class="body" v-for="(item,key) in talentPriorityReqKey">
                            <li>
                                <span class="title">{{item}}：</span>
                                <span>{{talentPriorityReq[item]}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>其他</span>
                        </div>
                        <ul class="body">
                            <li style="">
                                <span class="title">其他要求：</span>
                                <span class="" style="margin-left:70px;display:block;"
                                      v-html="jobInfo.jobList[0].talentOtherReq"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="box">
                        <div class="header">
                            <span class="vertical"></span>
                            <span>薪资福利</span>
                        </div>
                        <ul class="body">
                            <li>
                                <span class="title">薪资构成：</span>
                                <span class="text-center">{{jobInfo.jobList[0].welfareSalary}}</span>
                            </li>
                            <li>
                                <span class="title">社保福利：</span>
                                <span class="text-center">{{jobInfo.jobList[0].welfareSociety}}</span>
                            </li>
                            <li>
                                <span class="title">假期福利：</span>
                                <span class="text-center">{{jobInfo.jobList[0].welfareVacation}}</span>
                            </li>
                            <li>
                                <span class="title">交通福利：</span>
                                <span class="text-center">{{jobInfo.jobList[0].welfareTransport}}</span>
                            </li>
                        </ul>
                    </div>
                </el-tab-pane>
              
            </el-tabs>
        </div>


        <!--弹窗 1试用期  2以合作-->
        <div class="lPopup_box" v-show="islabel">
            <div class="box_header">
                <i class="bleft"></i>
                <span>确认职位审核通过？</span>
                <i @click="docancel" class=" el-icon-close fl"></i>
            </div>
            <div class="box_body">
                <div class="really" v-if="opType==1">自荐奖金
                    <input v-if="jobInfo.checkState==2" v-model="comBonus" @input="wipeInit"
                           placeholder="请设置自荐奖金金额"></input>
                    <span v-if="jobInfo.checkState==1" style='color:red;margin-left: 10px;margin-right: 10px'>{{comBonus}}</span>K
                </div>
                <div class="really" v-if="opType==0">
                    确认 <span>{{jobInfo.jobList[0].name}}</span> 审核不通过吗？
                </div>
                <div class="jobonus really" v-if="jobInfo.checkState==2&&opType==1">职位佣金<input v-model="ourJobbonus"
                                                                                               @input="wipeInit"
                                                                                               placeholder="请设置职位奖金金额"></input>K
                </div>
                <div class="lzhifu">
                    <div v-for="(item,index) in pws">
                        <input type="text" v-model="pws[index]" v-focus="index==aindex&&initFlag?true:false"
                               :data-id="index" @input="inputPwd" maxlength="1">
                    </div>
                </div>
                <p class="tal">请输入6位确认密码</p>
                <div class="lbtn">
                    <el-button class="close" @click="docancel" type="primary" plain>取消</el-button>
                    <el-button class="affirm" @click="doconfirm" type="primary" plain>确认</el-button>
                </div>
            </div>
        </div>

        <el-dialog title="职位修改记录" :visible.sync="dialogTableVisible" width="95%" >
        <el-table :data="gridData" border :header-cell-style="{background:'#E6E9F0'}"  max-height="600" >
            <el-table-column label="操作"  align="center" >
                <el-table-column label="修改时间" property="rdtime" width="180" align="center" >
                </el-table-column>
            </el-table-column>
            <el-table-column v-for="item in titles" :label="item.title1"  align="center">
                <el-table-column  :property="item2.prop" v-for="item2 in item.title2" :label="item2.title" :width="item2.width" align="center" >
                    <template scope="scope">
                        <span  v-if="scope.row[item2.prop] != gridData[(scope.$index==gridData.length-1)?scope.$index:(scope.$index+1)][item2.prop]"  style="color:red">{{ scope.row[item2.prop] }}</span>
                        <span v-else>{{ scope.row[item2.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
</el-dialog>
    </div>
</template>

<script>
  import Jobmodel from '@/components/EnterpriseCont/EnterpriseCont.vue'

  export default {
    name: 'ServiceAudit',

    components: {
      Jobmodel
    },
    directives: {
      'focus'(el, binding, vnode) {
        // console.log(binding)
        if (binding.value) {
          el.focus()
        } else {
          el.blur()
        }
        el.onfocus = function() {
        }
        el.onblur = function() {
        }
      }
    },
    data() {
      return {
        dialogTableVisible:false,
        initFlag: true,
        btnlist: [
          { label: '职位JD', isActive: true },
          { label: '职位PA', isActive: false }
        ],
        gridData:[],
        titles:[{title1:"职位基本信息",title2:[{title:"职位名称",prop:"name",width:180},{title:"招聘人数",prop:"recruitingNumbers",width:80},{title:"职位年薪",prop:"salary",width:180},{title:"工作地点",prop:"city",width:80},{title:"面试反馈时间",prop:"interFeedbackTimeIdStr",width:130},{title:"保证期",prop:"guaranteedPeriodIdStr",width:80}]},
                {title1:"职位要求",title2:[{title:"职位描述",prop:"jobDesc",width:210},{title:"任职要求",prop:"jobReq",width:210},{title:"执业类型",prop:"licenseTypeIdStr",width:180},{title:"职位亮点",prop:"jobSpot",width:180}]},
                {title1:"人员描述",title2:[{title:"工作年限",prop:"workTimeStr",width:160},{title:"学历要求",prop:"eduReqStr",width:130}]},
                {title1:"有效期",title2:[{title:"职位有效期",prop:"validity",width:100}]},
                {title1:"必须",title2:[{title:"执业类型",prop:"执业类型bx",width:160},{title:"工作年限",prop:"工作年限bx",width:130},{title:"学历要求",prop:"学历要求bx",width:160},{title:"学院要求",prop:"学院要求bx",width:130},{title:"稳定性",prop:"稳定性bx",width:160},{title:"年龄要求",prop:"年龄要求bx",width:100},{title:"性别要求",prop:"性别要求bx",width:100}]},
                {title1:"优先",title2:[{title:"执业类型",prop:"执业类型yx",width:160},{title:"工作年限",prop:"工作年限yx",width:130},{title:"学历要求",prop:"学历要求yx",width:160},{title:"学院要求",prop:"学院要求yx",width:130},{title:"稳定性",prop:"稳定性yx",width:160},{title:"年龄要求",prop:"年龄要求yx",width:100},{title:"性别要求",prop:"性别要求yx",width:100}]},
                {title1:"其他",title2:[{title:"其他要求",prop:"talentOtherReq",width:190}]},
                {title1:"薪资福利",title2:[{title:"薪资构成",prop:"welfareSalary",width:160},{title:"社保福利",prop:"welfareSociety",width:160},{title:"假期福利",prop:"welfareVacation",width:160},{title:"交通福利",prop:"welfareTransport",width:160}]},
                ],
        input: '',
        islabel: false,
        isbtn: true,
        jobRow: [],
        companyInfo: [],
        value: '',
        textarea2: '',
        personFlag: false,//控制PA jd 显示
        tryShow: true,//控制试用信息和试用弹窗是否显示
        comBonus: '10',
        ourJobbonus: '',//职位佣金
        showBouns: false,
        b1: true,
        b2: true,
        pws: ['', '', '', '', '', ''],
        aindex: 0,
        opType: 0,
        staticData: [],
        talentNecessaryReq: {},
        talentPriorityReq: {},
        talentNecessaryReqKey: {},
        talentPriorityReqKey: {},
        comType: 1, //0、待审核，1、试用合作，2、已合作，3、暂不合作
        jobId: 0,
        companyId: 0,
        jobInfo: {
          bonus: '',
          jobList: []
        },
        activeName: 'first',
        jobDesc: '',
        jobReq: '',
      }
    },
    mounted() {
      document.onkeydown = function(e) {
        if (e.code == 'Backspace') {
          this.clearPwd()
        }
      }.bind(this)
    },
    methods: {
      wipeInit() {
        this.initFlag = false
      },
      clearPwd() {
        setTimeout(() => {
          if (this.aindex <= 0) {
            this.aindex = 0
          } else {
            this.aindex = this.aindex - 1
          }
        }, 250)
      },
      inputPwd(e) {
        this.initFlag = true
        if (e.data != null) {
          if (parseInt(e.target.dataset.id) + 1 >= this.pws.length) {
            this.aindex = parseInt(e.target.dataset.id)
            //console.log("========"+this.aindex )
          } else {
            this.aindex = parseInt(e.target.dataset.id) + 1
            //console.log("********"+this.aindex )
          }
        }
      },
      doClick(obj) {
        //console.log(obj)
        this.btnlist.forEach(item => {
          item.isActive = false
        })
        this.btnlist[obj].isActive = true
        this.personFlag = obj == 1 ? true : false
      },
      Popup(obj) {
        console.log('通过弹窗')
        if (obj == 1) {
          //companyInfo.checkState 0、待审核，1、试用合作，2、已合作，3、暂不合作
          this.opType = 1
          console.log('popip', this.companyInfo.checkState)
          this.islabel = true
        } else {// 2 审核不通过
          this.opType = 0
          this.islabel = true
        }
      },
      doconfirm() {
        var password = this.$b.inputPwdMerge(this.pws)
        let jstate = 0
        if (this.opType == 0) {
          this.comBonus = 0
          this.ourJobbonus = 0
          jstate = 2
        } else if (this.opType == 1) {
          jstate = 1
        } else {
          this.$message({
            type: 'error',
            message: '操作有误'
          })
        }
        var params = {
          jobState: jstate,
          jobId: this.jobRow.id,
          password: password,
          bonus: this.comBonus,
          ourPosbonus: this.ourJobbonus
        }
        console.log('param', params)
        this.lAxios({
          method: 'post',
          url: '/platform/updateJobState.do',
          params: params
        }).then(res => {
          if (res.data.status == 0) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.pws = ['', '', '', '', '', '']
            this.islabel = false
            if (this.opType == 1) {
              this.$router.push({ path: '/JobPosting', query: { type: '1' } })
            } else if (this.opType == 0) {
              this.$router.push({ path: '/JobPosting', query: { type: '2' } })
            }
          } else {//失败
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
          //异常
        }).catch(err => {
          //失败的回调函数
          console.log(err)
        })
      },
      docancel() {
        this.pws = ['', '', '', '', '', '']
        this.islabel = false
      },
      jobChange(item) {
        this.jobId = item
        this.initData()
      },
      getStaticData(id) {
        for (let item of this.staticData) {
          if (item.id == id) {
            return item.content
            break
          }
        }
      },
      initData() {

        this.lAxios({
          method: 'post',
          url: '/platform/selectListJobInfo.do',
          params: {
            //传参
            companyId: this.companyId,
            jobId: this.jobId
          }
        }).then(res => {
          //成功
          this.jobInfo = res.data.data ? res.data.data : {}
          this.jobInfo.jobList = res.data.data.jobList ? res.data.data.jobList : []
          let talentNecessaryReq = JSON.parse(this.jobInfo.jobList[0].talentNecessaryReq)
          let talentPriorityReq = JSON.parse(this.jobInfo.jobList[0].talentPriorityReq)

          Object.keys(talentNecessaryReq).map((key, item) => {
            let typevalue = talentNecessaryReq[key]
            talentNecessaryReq[key] = this.getStaticData(typevalue)
          })
          Object.keys(talentPriorityReq).map((key, item) => {
            let typevalue = talentPriorityReq[key]
            talentPriorityReq[key] = this.getStaticData(typevalue)
          })
          this.talentNecessaryReq = talentNecessaryReq
          this.talentPriorityReq = talentPriorityReq
          this.talentNecessaryReqKey = Object.keys(this.talentNecessaryReq)
          this.talentPriorityReqKey = Object.keys(this.talentPriorityReq)
          this.jobDesc = this.getTextAreaTo(this.jobInfo.jobList[0].jobDesc);
          this.jobReq = this.getTextAreaTo(this.jobInfo.jobList[0].jobReq);
          this.jobInfo.jobList[0].talentOtherReq= this.getTextAreaTo(this.jobInfo.jobList[0].talentOtherReq)
        })
      },
      toCommunication() {
        this.$toComm.toCompany(this, this.jobInfo.id)
      },
      /**
       * 将换行符替换成标签
       * @param {*} strValue 需要修改的文本
       */
      getTextAreaTo(strValue) {
        return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
      },
      dialogTable(){
          this.dialogTableVisible = true;
          this.lAxios({
              method: 'post',
              url: '/platform/selectJobHistoryByJobId.do',
              params: {
                  jobId: this.jobId
              }
          }).then(res => {
              this.gridData = res.data.data;
              this.gridData.forEach(girdData =>{
                  let talentNecessaryReq = JSON.parse(girdData.talentNecessaryReq);
                  Object.keys(talentNecessaryReq).map((key, item) => {
                      let typevalue = talentNecessaryReq[key]
                      girdData[key+'bx'] = this.getStaticData(typevalue)
                  })

                  let talentPriorityReq = JSON.parse(girdData.talentPriorityReq);
                  Object.keys(talentPriorityReq).map((key, item) => {
                      let typevalue = talentPriorityReq[key]
                      girdData[key+'yx'] = this.getStaticData(typevalue)
                  })
                  girdData.salary = (girdData.tax == 0?'税前 ':'税后 ') + girdData.salaryPerMonthLow +'-'+girdData.salaryPerMonthHigh +' W/ '+ girdData.salaryCount +'年'
              })
          })
      }

    },
    created() {
        //1.取值
      this.staticData = JSON.parse(localStorage.getItem('staticData'))
      this.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
      this.jobRow = JSON.parse(localStorage.getItem('jobRow'))
      this.value = parseInt(this.jobRow.id)
      let name = localStorage.getItem('button')
      if (name == '审核通过') {//控制是否显示推荐奖金
        this.showBouns = true
        this.b2 = false
      } else if (name == '不通过') {
        this.b1 = false
      }
      console.log('value', this.value)
      //2.判断是否显示试用信息
      if (this.companyInfo.checkState != 1) {
        this.tryShow = false
      }
      this.companyId = this.$route.query.companyId
      this.jobId = this.$route.query.id
      this.initData()
    },
    activated(){
      
    },
    beforeDestroy() {
      //3.清空数据
      // localStorage.removeItem("companyInfo")
      // localStorage.removeItem("jobRow")
    }
  }
</script>

<style lang="scss" scoped>
    .box_body > .really > input {
        padding-left: 10px;
        width: 160px;
        height: 24px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .ServiceAudit {
        box-sizing: border-box;
        // border: 1px solid #797979;
        font-size: 14px;
        position: relative;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .zj {
        font-size: 18px;
        margin-right: 10px;
    }

    .title {
        height: 33px;
        line-height: 33px;
    }

    .auditTop {
        margin: 0 0 10px 0;
        min-height: 150px;
        line-height: 30px;
        padding: 20px;
        background-color: #fff;
        // display: flex;
        // align-items: center;
        .top {
            width: 100%;
            height: 35%;
            display: flex;
            justify-content: flex-start;

            .firstDiv {
                font-size: 20px;
                font-weight: 700;
            }

            .secDiv {
                margin-left: 20px;
                color: #333;
                font-size: 14px;
            }
        }

        .bottom {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
        }

        .bottom-time {
            width: 100%;
            height: 15px;
            display: flex;
            justify-content: flex-start;

        }
    }
    .auditMid{
     
      height: 10px;
      padding-top: 8px;
      background: #fff;
      margin: 0 0 5px 0;
      text-align: right;
      button{
        background: #3377ff;
        color: #fff;
      }
    }

    .left {
    }

    .firstDiv {

    }

    .secDiv {
        display: flex
    }

    .secDiv > div {
        margin-right: 15px;
    }

    .Ltrial {
        font-size: 12px;
        color: #ff3399;
        margin: 0 20px 0 10px;
    }

    .lgoutong {
        width: 44px;
        height: 26px;
        border: 1px solid #797979;
        background-color: white;
        border-radius: 4px;
    }

    .right {
        display: flex;
    }

    .right > button {
    }

    .right > button:nth-child(2) {
    }

    .auditMain {
        background-color: #fff;
    }

    .auditMain > button {
        width: 125px;
    }

    .auditMain > button:nth-child(1) {
        margin-right: 10px;
        margin-left: 2%;
    }

    .Lcontent {
        overflow-y: auto;
        flex-grow: 1;
        padding: 15px;
        background-color: #fff;
        // margin-left: 2%;
        /*height: 396px;*/

    }

    .leftB {
        width: 296px;
        height: 33px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .lbonus {
        position: absolute;
        top: 45px;
        left: 226px;
    }

    .lrecord {
        width: 96%;
        margin-left: 2%;
        margin-top: 60px;
    }

    .lrecord div {
        margin-bottom: 10px;
    }

    /*---------------信息审核----------------------*/
    .information {
        background-color: #fff;
    }

    .information > div {
        // margin-left: 2%;
        margin-top: 10px;
        /*height: 200px;*/
        background-color: #f2f2f2;
        /*background-color: pink;*/
    }

    /*-----------------试用---------------------*/
    .trial {
        float: right;
    }

    .trial > span {
        margin-right: 70px;
    }

    /*-------------------职位PA-------------------------*/
    .BasicInfor {
        display: flex;
        flex-direction: column;
        // margin-left: 5px;
    }

    .BasicInfor div {
        // margin-left: 15px;
        margin-top: 20px;
        margin-bottom: 15px;
        padding-left: 50px;

        &:first-child {
            padding-left: 20px;
        }
    }

    .BasicInfor div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
    }

    /*-------------------弹窗--------------------*/
    .lPopup {
        width: 100%;
        height: 100%;
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .lPopup_box {
        width: 400px;
        background-color: white;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .box_header {
            height: 40px;
            background-color: #f7f9fc;
            padding: 0 15px;
            display: flex;
            align-items: center;

            .bleft {
                flex: .3;
                width: 3px;
                height: 16px;
                background-color: #3377ff;
                box-sizing: border-box;
                border: rgb(211, 219, 255) 1px solid;
                margin: 12px 10px;
            }

            span {
                font-size: 16px;
                font-weight: 700;
                color: #333;
                flex: 100;
            }

            i {
                flex: 5;
            }
        }
    }

    .box_body {
        padding: 25px 55px;
        /*text-align: center;*/
        .really {
            margin: 20px 0;
            font-size: 16px;
            color: #1f2e4d;
        }

        p {
            font-size: 14px;
            color: #f00;
        }

        .tal {
            text-align: left;
            margin-bottom: 60px;
        }
    }

    .lzhifu {
        // width: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 30px auto 5px;

        input {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 1px solid rgb(230, 233, 240);
            border-radius: 3px;
        }
    }

    // .password{
    //     display: flex;
    //     flex-direction: row;
    //     margin-left:55px;
    // }
    // .inp{
    //     width: 24px;
    //     height: 30px;
    //     border: 1px solid #797979;
    //     margin-right: 10px;
    // }
    // .lbtn > button {
    //     width:100px;
    //     height:40px;

    // }

    // .lbtn > button:nth-child(1) {
    //     margin-right: 10px;
    // }
    .lbtn {
        display: flex;
        justify-content: space-between;

        button {
            width: 140px;
            height: 40px;
            border: 1px solid rgb(230, 233, 240);
            background-color: rgb(247, 249, 252);
            border-radius: 5px;
            // margin-bottom: 10px;
        }

        .affirm {
            background-color: #3377ff;
            color: #fff;
        }
    }

    .ltanContent {
        width: 314px;
        height: 347px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .ltanContent > div {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .ltanContent > div:nth-child(1) {
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }

    .ltanBox {
        display: flex;
        flex-direction: column;

    }

    .ltanBox > div {
        margin-top: 20px;
        margin-bottom: 10px;
        text-align: left;
        margin-left: 60px;
    }

    .ltanBox > div:nth-child(1) {
        margin-top: 10px;
    }

    .ltanBox > div > span {
        margin-right: 10px;

        &:nth-child(2) {
            margin-right: 0;
        }
    }

    .active {
        background-color: #3377ff;
        color: #fff;
    }

    .linp {
        height: 20px;
        width: 122px;
        margin-right: 5px;
    }

    .second-button {
        width: 125px;
        height: 50px;
        background: #EAF2FF;
        border: 1px solid #3377ff;
        color: #3377ff;
        font-size: 16px;
        // &:hover{
        //   background: #409EFF;
        //   color: #fff;
        // }
    }

</style>
<style lang="scss">
.el-dialog {
  
  
  .el-dialog__header {
    // border-bottom: 1px solid #dcdcdc;
    background: #F7F9FC;

    .el-dialog__title {
      height: 16px;
      line-height: 16px;
      display: inline-block;
      padding: 0 0 0 16px;
      border-left: 2px solid #3377ff;
    }
  }
}

    .service-list {
        background-color: #e8e8e8;
        padding: 10px;

        .service-tab {
            margin: 10px 0 0 0;
            position: relative;

            .back {
                position: absolute;
                right: 20px;
                top: 20px;
            }

            .el-tabs__nav-scroll {
                border-bottom: 3px solid #37f;
            }

            .el-tabs__nav {
                border-bottom: none;
            }

            .el-tabs__item {
                width: 100px;
                height: 36px;
                text-align: center;
                font-size: 16px;
                line-height: 36px;
                color: rgb(31, 46, 77);
                border-bottom: none;
            }

            .is-active {
                background-color: #37f;
                color: #fff;
            }

            .box {
                padding: 30px 40px;
                margin-top: 20px;
                background-color: #f7f9fc;

                .header {
                    margin-bottom: 15px;

                    .vertical {
                        display: inline-block;
                        margin-right: 10px;
                        width: 3px;
                        height: 14px;
                        background-color: #37f;
                        border: 1px solid rgb(211, 219, 235);
                        box-sizing: border-box;
                    }

                    span {
                        font-size: 16px;
                        font-weight: 700;

                    }
                }

                .body {
                    margin-left: 60px;

                    li {
                        margin-top: 10px;

                        .text-center {
                            line-height: 30px;
                        }

                        span {
                            font-size: 14px;
                            color: #333;
                            // line-height: 30px;
                        }

                        .title {
                            // border: 1px solid red;
                            color: #363636;
                            font-weight: 700;
                        }

                        .label {
                            display: inline-block;
                            margin-right: 20px;
                            padding: 5px 20px;
                            border: 1px solid #bcd2fd;
                            font-size: 13px;
                            color: #37f;
                            border-radius: 15px;
                            background-color: #e4edfc;
                        }
                    }
                }
            }

            .m_t_10 {
                margin-top: 10px;
            }
        }

        .table {
            p {
                margin-bottom: 10px;
                font-weight: 700;
                font-size: 18px;
                color: #1f2e4d;
            }

            .tab_header {
                th {
                    color: #1f2e4d;
                    font-weight: 400;
                    font-size: 14px;
                    text-align: center;
                    background-color: #e6e9f0;
                }

                .tab_row {
                    td {
                        .cell {
                            color: #1f2e4d;
                        }
                    }
                }
            }
        }

        .m_t_30 {
            margin-top: 30px;
        }
    }


</style>

